<template>

	<view class="containar">
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"></image>
			</button>
		</view>
		<view class="userName">
			<text>昵称：</text>
			<input :clearable="false" type="nickname" class="weui-input" :value="userName" @blur="bindblur"
				placeholder="请输入昵称" @input="bindinput" />
		</view>
		<view style="width: 100%;height: 1px; background: #EEE;">
		</view>
		<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; margin-top: 40rpx;">
			· 申请获取以下权限
		</view>
		<view style="width: 700rpx; height: 20px; font-size: 13px; margin: auto; color: #cbcbcb; margin-top: 25rpx;">
			· 获得你的信息(昵称、头像等)
		</view>

		<view class="btn">
			<button @click="onSubmit" type="primary">保存</button>
		</view>
	</view>
</template>
<script>
	// import {
	// 	pathToBase64,
	// 	base64ToPath
	// } from 'image-tools'
	// import {
	// 	uploadNameImg,
	// 	uploadImg
	// } from '@/api/owner-login.js';

	export default {
		data() {
			return {
				// 下面我都给了默认值，根据自己的需求可以决定需不需要默认值
				avatarUrl: 'https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png',
				userName: this.getRandomName(Math.floor(Math.random() * (6 - 2) + 3))
			};
		},
		onShow() {},
		methods: {
			bindblur(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl
				console.log(avatarUrl);
			},
			onSubmit() {
				var that = this
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						const {
							code
						} = event
						// 判断头像以及昵称不为空 再上传
						if (that.userName && that.avatarUrl) {
							uni.request({
								url: "https://api.weixin.qq.com/sns/jscode2session",
								data: {
									appid: "wx53d8eb9533977f1f",
									secret: "cb459b14b192afeb63b64eacde54fab5",
									js_code: code,
									grant_type: 'authorization_code'
								},
								success: (res) => {
									console.log(res);
									let openid = res.data.openid
									console.log("tjjjjj", that.avatarUrl);
									uni.uploadFile({
										url: 'http://127.0.0.1:7980/zhy/upload', //仅为示例，非真实的接口地址
										filePath: that.avatarUrl,
										name: 'file',
										success: (uploadFileRes) => {
											uni.request({
												url: "http://127.0.0.1:7980/zjb/login",
												method: 'POST',
												data: {
													name: that.userName,
													avater: uploadFileRes.data,
													openid,
													phone: ""
												},
												success: ({
													data
												}) => {
													console.log(data);
													uni.setStorage({
														key: 'userinfo',
														data: data
															.data,
														success: () => {
															uni.switchTab({
																url: "/pages/tabbar/tabbar-1/tabbar-1"
															})
														}
													});

												}
											})
										},
										fail(err) {
											console.log(err);
										}
									});
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '请上传头像并填写昵称'
							})
							return false;
						}
					},
					fail: function(err) {
						console.log('err', err);
					}
				})

			},

			/**
			 * @description 保存事件，用于保存用户头像昵称
			 * 
			 * */

			save() {
				uni.showLoading({
					title: '加载中'
				});
				const data = {
					nickName: this.userName,
					headImgUrl: this.avatarUrl
				}
				uploadNameImg(data).then(res => {
					uni.reLaunch({
						url: '../index/index'
					});
				})
			},

			/**
			 * @description 生成随机名字方法
			 * */

			randomAccess(min, max) {
				return Math.floor(Math.random() * (min - max) + max)
			},

			decodeUnicode(str) {
				//Unicode显示方式是\u4e00
				str = "\\u" + str
				str = str.replace(/\\/g, "%");
				//转换中文
				str = unescape(str);
				//将其他受影响的转换回原来
				str = str.replace(/%/g, "\\");
				return str;
			},

			getRandomName(NameLength) {
				let name = ""
				for (let i = 0; i < NameLength; i++) {
					let unicodeNum = ""
					unicodeNum = this.randomAccess(0x4e00, 0x9fa5).toString(16)
					name += this.decodeUnicode(unicodeNum)
				}
				return name
			},
		}
	}
</script>
<style lang="scss" scoped>
	.containar {
		width: 100vw;
		height: 100vh;
		background: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;

		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				border: none !important;
				width: auto;
				// padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				border: none;
				justify-content: center;
				align-items: center;

				&::after {
					border: none;
				}

				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		.userName {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			margin-top: 30rpx;
		}
	}
</style>